import 'package:flutter/material.dart';
import 'package:flutter_dva_hooks/flutter_dva_hooks.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:todo_app/components/FontIcon.dart';
import 'package:todo_app/components/Overlay/main.dart';
import 'package:todo_app/components/TextExt.dart';
import 'package:todo_app/components/UserNameAvatar.dart';
import 'package:todo_app/constants/DColor.dart';
import 'package:todo_app/controllers/GroupController.dart';
import 'package:todo_app/controllers/definitions/GroupModel.dart';
import 'package:todo_app/layout/Gaps.dart';
import 'package:todo_app/layout/ListItem.dart';
import 'package:todo_app/models/getters.dart';
import 'package:todo_app/utils/AppNavigator.dart';

Future<GroupModel?> showGroupPicker(BuildContext context) {
  return showModalBottomSheet<GroupModel>(
    context: context, 
    isScrollControlled: true,
    useSafeArea: true,
    builder: (_) {
      return const GroupPickerPage();
    });
}

class GroupPickerPage extends HookWidget {
  const GroupPickerPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var groups = useState<List<GroupModel>>([]);
    var store = useDvaStore();
    var defaultGroupId = store.rootState.system?.user?.default_group_id;

    useEffect(() {
      GroupController.listUsingGet().then((res) {
        if(res.status == 'success') {
          groups.value = res.data ?? [];
        } else {
          showOverlayToast(res.msg ?? "获取用户分组失败");
        }
      });
      return () {};
    }, []);
    return CustomScrollView(
        slivers: [
          const SliverAppBar(
            title: Text("选择分组"), 
            backgroundColor: DColor.primary,
          ),
          SliverToBoxAdapter(
            child: Gaps.vGap10,
          ),
          SliverList.list(
            children: groups.value.map((group) {
              return ListItem(
                icon: UserNameAvatar(username: group.group_name ?? "组", size: 36.dp,),
                height: 56.dp,
                title: TextExt.title(
                  (defaultGroupId == group.id ? '【默认分组】' : '') + (group.group_name ?? ""),
                  fontSize: 18.dp,
                  lineHeight: 24 / 18
                ),
                border: groups.value.last != group,
                bgColor: Colors.white,
                onTap: () {
                  AppNavigator.pop(group);
                },
                subtitle: Text.rich(
                  TextSpan(
                    children: [
                      WidgetSpan(
                        alignment: PlaceholderAlignment.middle,
                        child: FontIcon(icon: FontIcons.users, size: 12.dp, color: DColor.descText)
                      ),
                      WidgetSpan(child: Gaps.hGap4),
                      TextSpan(text: group.total_user_count?.toStringAsFixed(0) ?? '0'),
                      WidgetSpan(child: Gaps.hGap12),
                      WidgetSpan(
                        alignment: PlaceholderAlignment.middle,
                        child: FontIcon(icon: FontIcons.list2, size: 12.dp, color: DColor.descText)
                      ),
                      WidgetSpan(child: Gaps.hGap4),
                      TextSpan(text: group.running_todo_count?.toStringAsFixed(0) ?? '0')
                    ]
                  ),
                  style: TextStyle(fontSize: 12.dp, color: DColor.descText)
                ),
                nextIcon: true,
              );
            }).toList()
          )
        ],
    );
  }
}